<template>
<div class="app-container">
      <div class="row content-container">
        <nav class="navbar navbar-default navbar-fixed-top navbar-top">
          <div class="container-fluid">
              <div class="navbar-header">
                  <button type="button" class="navbar-expand-toggle">
                      <i class="fa fa-bars icon"></i>
                  </button>
                  <ol class="breadcrumb navbar-breadcrumb">
                      <li class="active">Dashboard</li>
                  </ol>
                  <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                      <i class="fa fa-th icon"></i>
                  </button>
              </div>
              <ul class="nav navbar-nav navbar-right">
                  <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                      <i class="fa fa-times icon"></i>
                  </button>
                  <li>
                   <a href="#" aria-expanded="false">
                    <i class="fa fa-comments-o"></i>
                    <span class="hidden-xs hidden-sm">网站管理</span>
                   </a>
                  </li>
                  <li>
                   <a href="#" aria-expanded="false"><i class="fa fa-comments-o"></i>
                   <span class="hidden-xs hidden-sm">网站管理</span>
                   </a>
                  </li>
                  <li class="active danger">
                   <a href="#" aria-expanded="false"><i class="fa fa-comments-o"></i>
                   <span class="hidden-xs hidden-sm">网站管理</span>
                   </a>
                  </li>
                  <li>
                   <a href="#" aria-expanded="false"><i class="fa fa-comments-o"></i>
                   <span class="hidden-xs hidden-sm">网站管理</span>
                   </a>
                  </li>

                  <!-- <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-comments-o"></i></a>
                      <ul class="dropdown-menu animated fadeInDown">
                          <li class="title">
                              Notification <span class="badge pull-right">0</span>
                          </li>
                          <li class="message">
                              No new notification
                          </li>
                      </ul>
                  </li> -->
                  <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-star-half-o"></i> 
                      <span class="hidden-xs hidden-sm">网站管理</span>
                      </a>
                      <ul class="dropdown-menu danger  animated fadeInDown">
                          <li class="title">
                              Notification <span class="badge pull-right">4</span>
                          </li>
                          <li>
                              <ul class="list-group notifications">
                                  <a href="#">
                                      <li class="list-group-item">
                                          <span class="badge">1</span> <i class="fa fa-exclamation-circle icon"></i> new registration
                                      </li>
                                  </a>
                                  <a href="#">
                                      <li class="list-group-item">
                                          <span class="badge success">1</span> <i class="fa fa-check icon"></i> new orders
                                      </li>
                                  </a>
                                  <a href="#">
                                      <li class="list-group-item">
                                          <span class="badge danger">2</span> <i class="fa fa-comments icon"></i> customers messages
                                      </li>
                                  </a>
                                  <a href="#">
                                      <li class="list-group-item message">
                                          view all
                                      </li>
                                  </a>
                              </ul>
                          </li>
                      </ul>
                  </li>
                  <li class="dropdown profile pull-right">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Emily Hart <span class="caret"></span></a>
                      <ul class="dropdown-menu animated fadeInDown">
                          <li class="profile-img">
                              <img src="http://upload-images.jianshu.io/upload_images/1628444-91fa2ad491876145.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="profile-img">
                          </li>
                          <li>
                              <div class="profile-info">
                                  <h4 class="username">Emily Hart</h4>
                                  <p>emily_hart@email.com</p>
                                  <div class="btn-group margin-bottom-2x" role="group">
                                      <button type="button" class="btn btn-default"><i class="fa fa-user"></i> Profile</button>
                                      <button type="button" class="btn btn-default"><i class="fa fa-sign-out"></i> Logout</button>
                                  </div>
                              </div>
                          </li>
                      </ul>
                  </li>
              </ul>
          </div>
        </nav>

        <div class="side-menu sidebar-inverse">
          <nav class="navbar navbar-default" role="navigation">
              <div class="side-menu-container">
                  <div class="navbar-header">
                      <a class="navbar-brand" href="#">
                          <div class="icon fa fa-paper-plane"></div>
                          <div class="title">管理后台</div>
                      </a>
                      <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                          <i class="fa fa-times icon"></i>
                      </button>
                  </div>
                  <ul class="nav navbar-nav">
                      <li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" v-bind:class="{'panel panel-default dropdown': item.children.length>1,'active': ($route.path==item.children[0].path)&&item.children.length==1}">
                        <router-link :to="item.children[0].path" v-if="item.children.length==1">
                          <span class="icon" :class="item.icon"></span>
                          <span class="title">{{item.children[0].name}}</span>
                        </router-link>
                        <a :href="'#dropdown'+index" data-toggle="collapse" v-else>
                          <span class="icon" :class="item.icon"></span>
                          <span class="title">{{item.name}}</span>
                        </a>
                        <!-- 下拉 -->
                          <div :id="'dropdown'+index" class="panel-collapse collapse" v-if="item.children.length>1">
                              <div class="panel-body">
                                  <ul class="nav navbar-nav">
                                      <li v-for="itemChild in item.children" v-bind:class="{'active': $route.path==itemChild.path}">
                                        <router-link :to="itemChild.path">{{itemChild.name}}</router-link>
                                      </li>
                                  </ul>
                              </div>
                          </div>
                      </li>
                  </ul>
              </div>
              <!-- /.navbar-collapse -->
          </nav>
        </div>
            <div class="container-fluid">
                <div class="side-body padding-top">
        <router-view></router-view>
        </div></div>
      </div>
      <footer class="app-footer">
            <div class="wrapper">
                <span class="pull-right">2.1 <a href="#"><i class="fa fa-long-arrow-up"></i></a></span> © 2015 Copyright. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
            </div>
        </footer>
    </div>
</template>
<script>
import '../assets/js/app.js'
export default{
	data () {
		return {
      //msg: 'Welcome to Your Vue.js App'
    }
	}
}
</script>